<template>
    <div class="container">
        <div class="box">
            <el-table :data="posts" style="width: 100%">
                <el-table-column prop="id" label="ID" width="100"></el-table-column>
                <el-table-column prop="content" label="内容" width="500"></el-table-column>
                <el-table-column prop="image" label="图片" width="300">
                    <template slot-scope="scope">
                        <img :src="scope.row.image" alt="" style="width: 100px; height: 100px;">
                    </template>
                </el-table-column>
                <el-table-column prop="likeCount" label="点赞数" width="100"></el-table-column>
                <el-table-column prop="status" label="状态" width="100"></el-table-column>
                <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {getAllPosts, deletePost} from "@/api/post";

export default {
    name: 'FrumManage',
    created() {
        this.userId = localStorage.getItem('userId');
        getAllPosts().then(res => {
            this.posts = res.data;
        })
    },

    data() {
        return {
            userId: '',
            posts: [{
                content: '',
                createTime: '',
                id: '',
                image: '',
                likeCount: '',
                status: '',
                userId:  ''
            }]
        }
    },
    methods: {
        handleDelete(id) {
            deletePost(id, this.userId).then(res => {
                console.log(res);
                this.refreshPosts();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            
            })
        },
        refreshPosts() {
            getAllPosts().then(res => {
                this.posts = res.data;
            })
        }
    }
}


</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    padding: 1.5rem;
    width: 80%;
    height: 80%;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 0 30px #0a113612;
    display: flex;
    justify-content: space-around;
}
</style>